<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="搜索" left-arrow @click-left="GOback" fixed placeholder :border="false" />
    <van-search v-model="value" @search="onSearch" @clear="remove" placeholder="请输入商家或美食名称" />
    <section v-if="SearchData.length">
      <h4>商家</h4>
      <ul class="restList">
        <li v-for="item in SearchData " :key="item.id" @click="Details(item.id)">
          <div class="list" v-if="item.image_path">
            <img :src="'//elm.cangdu.org/img/'+item.image_path" alt="" width="40px">
          </div>
          <div class="right">
            <span>{{item.name}}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhifu-zhifubao"></use>
            </svg>
            <p>月售 {{item.recent_order_num}} 单</p>
            <p>{{item.float_minimum_order_amount}}起送 / {{item.distance}}</p>
          </div>
        </li>
      </ul>
    </section>
    <div class="search_none" v-if="check==messageData">很抱歉！无搜索结果</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      //搜索框内的输入内容
      value: '',
      check: '搜索餐馆数据失败'
    }
  },
  computed: {
    ...mapState(['SearchData', 'messageData'])
  },
  methods: {
    //后退页面
    GOback() {
      this.$router.go(-1)
    },
    onSearch() {
      //触发搜索餐厅数据
      this.$store.dispatch('Searchrest', this.value)
    },
    //清除数据
    remove() {
      if (this.value.length === 0) {
        this.$store.commit('removeData')
      }
    },
    Details(id) {
      window.sessionStorage.setItem('shopid', id)
      this.$router.push('/Details')
    }
  }
}
</script>

<style lang="less" scoped>
.search_none {
  text-align: center;
  margin: 0 auto;
  margin-top: 3rem;
}
section {
  margin-top: 2rem;
}
h4 {
  font-size: 0.6rem;
  line-height: 1.9rem;
  text-indent: 0.5rem;
  font-weight: 700;
  color: #666;
}
.restList {
  background-color: #fff;
  li {
    font-size: 0.55rem;
    padding: 0.6rem 0.4rem;
    border-bottom: 0.025rem solid #f1f1f1;
    .list {
      float: left;
      margin-right: 0.25rem;
    }
    h5 {
      span {
        font-size: 0.55rem;
      }
    }
  }
}
</style>